<template>
  <a-drawer
    :width="'30%'"
    :visible="dialogVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title>选择表格表头 </template>

    <div class="draggable">
      <div class="draggable-selected">
        <draggable
          class="item"
          :list="headerList.list"
          ghost-class="ghost"
          handle=".move"
          filter=".forbid"
          :force-fallback="true"
          chosen-class="chosenClass"
          animation="300"
          :fallback-class="true"
          :fallback-on-body="true"
          :touch-start-threshold="10"
          :fallback-tolerance="10"
          :sort="true"
        >
          <template #item="{ element }">
            <div class="item-box">
              <a-button-group>
                <a-button :class="element.code ? 'forbid' : 'move'">
                  {{ element.title }}
                </a-button>
                <a-button
                  @click="removeHeader(element.id)"
                  v-if="element.code ? false : true"
                >
                  <icon-close-circle />
                </a-button>
              </a-button-group>
            </div>
          </template>
        </draggable>
      </div>
    </div>
    <div class="draggable-unselected">
      <h3>新增表头：</h3>
      <a-space>
        <a-input v-model="addData"></a-input>
        <a-button @click="addHeader">
          <template #icon>
            <icon-plus-circle />
          </template>
          <!-- Use the default slot to avoid extra spaces -->
          <template #default>新增</template>
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watch, watchEffect } from 'vue';
  import Draggable from 'vuedraggable';
  import { cloneDeep } from 'lodash';
  import { Message } from '@arco-design/web-vue';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 判断是否打开表头设置抽屉
      headData: []; // 传过来的表头
      forbidList?: string[]; // 不准移动和删除的表头
    }>(),
    {}
  );
  const addData = ref('');
  const emits = defineEmits(['update:visible', 'headerSave']);
  // 判断抽屉是否显示
  const dialogVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emits('update:visible', visible);
    },
  });
  const headerList = reactive<any>({
    list: cloneDeep(props.headData),
  });

  // 去除一个表头
  const removeHeader = (id: number) => {
    //header
    headerList.list = headerList.list.filter((ele: any) => ele.id !== id);
  };

  // 添加一个表头
  const addHeader = () => {
    //
    if (addData.value) {
      headerList.list.push({
        id: +new Date(),
        title: addData.value,
        dataIndex: `${+new Date()}`,
        align: 'center',
      });
      addData.value = '';
    } else {
      Message.error('输入为空');
    }
  };
  // 确认
  const handleOk = () => {
    emits('headerSave', cloneDeep(headerList.list));
    dialogVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    dialogVisible.value = false;
  };
</script>

<style lang="less" scoped>
  .draggable {
    &-selected {
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
    }
    &-selected,
    &-unselected {
      .item {
        display: flex;
        flex-wrap: wrap;

        &-box {
          margin: 0 10px 10px 0;
        }
      }
    }
  }
</style>
